import React, { useState } from "react";
import '../../css/my/myipad.css'
import start from "../../images/forBuyIpad/buyIpad_start.png";
import size11 from "../../images/forBuyIpad/buyIpad_11.png";
import size12 from "../../images/forBuyIpad/buyIpad_12.png";
import size11_light from "../../images/forBuyIpad/buyIpad_11_light.png";
import size11_dark from "../../images/forBuyIpad/buyIpad_11_dark.png";
import size12_light from "../../images/forBuyIpad/buyIpad_12_light.png";
import size12_dark from "../../images/forBuyIpad/buyIpad_12_dark.png";
import redApple from "../../images/forBuyIpad/buyIpad_redApple.png";
import heart from "../../images/forBuyIpad/buyIpad_heart.png";

export default function TheMain() {
    let [model, setModel] = useState(null)
    let [color, setColor] = useState(null)
    function clickModel(model) {
        setModel(model)
    }
    function clickModelSelector() {
        setModel(null)
    }
    return (<div className='myiPad'>
        <div className='img'>
            <img src={start} alt=''></img>
        </div>
        <div className='content'>
            <h1>Buy iPad Pro</h1>
            <p>Get free delivery on iPad. And free returns.</p>
            {/* MODEL */}
            <div style={{ display: !model ? "block" : "none" }}>
                <p style={{ fontSize: 25 }}>Model</p>
                <p className='model' onClick={() => clickModel('11')}>
                    <span className='leftMsg'>11-inch iPad Pro </span>
                    <span className='rightMsg'>From A$1,299</span>
                </p>
                <p className='model' onClick={() => clickModel('12.9')}>
                    <span className='leftMsg'> 12.9-inch iPad Pro </span>
                    <span className='rightMsg'>From A$1,529</span>
                </p>
            </div>
            <div style={{ display: model ? "block" : "none" }}>
                <p className='modelSelector' >
                    <span className='leftMsg' onClick={() => clickModelSelector()}>
                        {model}-inch iPad Pro
                    </span>

                    <span className='rightChange' onClick={() => clickModelSelector()}>
                        Change
                    </span>
                </p>
            </div>
            <hr />
            {/* Finish */}
            <div style={{
                display: color ? 'none' : 'block',
                //pointerEvents牛牛，定义元素是否对指针事件做出反应。 
                pointerEvents: model ? "" : "none",
                opacity: model ? '1' : '0.4'

            }}>
                <p style={{ fontSize: 25 }}>Finish</p>
                <div className='kFinish'>
                    <div className='kGrey'>
                        <div className='kGreyCircle' onClick={() => {
                            if (model) {
                                setColor('Space Grey')
                            }
                        }
                        }></div>
                        <p >Space Grey</p>
                    </div>
                    <div className='kSliver' onClick={() => setColor('Sliver')}>
                        <div className='kSliverCircle'> </div>
                        <p >Sliver</p>
                    </div>
                </div>
            </div>

            <div style={{ display: color ? 'block' : 'none' }} >
                <p className='modelSelector' >
                    <span className='leftMsg' onClick={() => setColor(null)}>
                        {color}
                    </span>

                    <span className='rightChange' onClick={() => setColor(null)}>
                        Change
                    </span>
                </p>
            </div>
            <hr />

            <div className='end'>
                <h1  > A$1,880.00</h1>
                <p className='kNote'>Includes GST of approx. A$152.00.*</p>
                <a href='/' className='kInterest'>0% interest for 6, 12 or 24 months. Min. spend applies.</a>
                <hr className='kHr' />
                <p className='kAdd'>Add AppleCare+</p>
                <div className='appleCare'>
                    <img src={redApple} alt='' className='appleCareImg'></img>
                    <div className='appleCareContent'>
                        <p className='kAppleCareP'>AppleCare+</p>
                        <p className='kAppleCareP'>A$179.00</p>
                        <p className='kRemark'>Get up to two years of tech support and accidental damage coverage.</p>
                    </div>
                    <a href='/'>Add</a>
                </div>
                <div>
                    <button className='kContinue'>Continue</button>
                </div>
            </div>






        </div>
    </div>)
}
